<template>
  <div class="flex h-screen bg-gray-100">
    <!-- 左侧导航 -->
    <div class="w-64 bg-white shadow-md">
      <div class="p-4 border-b">
        <h2 class="text-xl font-semibold text-gray-800">视频工具箱</h2>
      </div>
      <nav class="mt-4">
        <router-link to="/video-loop" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-600 transition-colors" 
                     :class="{ 'bg-blue-50 text-blue-600': $route.path === '/video-loop' }">
          <div class="flex items-center">
            <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            视频正反循环
          </div>
        </router-link>
        <router-link to="/transparent-frames" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-600 transition-colors"
                     :class="{ 'bg-blue-50 text-blue-600': $route.path === '/transparent-frames' }">
          <div class="flex items-center">
            <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
            </svg>
            视频透明处理
          </div>
        </router-link>
      </nav>
    </div>
    
    <!-- 主内容区 -->
    <div class="flex-1 overflow-auto">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Layout'
}
</script>